import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { DjRadioRecommendWrap } from "./style";
import { getProgramRecommends } from "../store/actionType";
import { NavLink } from "react-router-dom";
import { getSizeImage } from "@/utils/format-utils";
import classNames from "classnames";

export default memo(function DjRadioRecommend() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getProgramRecommends());
  }, [dispatch]);

  const { djProgramRecommends } = useSelector(
    (state) => ({
      djProgramRecommends: state.getIn(["djPlaylists", "djProgramRecommend"]),
    }),
    shallowEqual
  );

  return (
    <DjRadioRecommendWrap>
      <div className="recommentBox wrap-v2">
        <div className="recommend-title">
          <p>
            推荐节目 <span>（每日更新）</span>
          </p>
        </div>
        <ul className="recommend-ul">
          {djProgramRecommends.code === 200
            ? djProgramRecommends.programs.map((item, index) => {
                return (
                  <li key={item.id}>
                    <div
                      className="fl imgbox"
                      style={{ width: "40px", height: "40px" }}
                    >
                      <img src={getSizeImage(item.coverUrl, 40)} alt="" />
                      {/* <i className={classNames({isShow:isSelect,mskPlay:true})}></i> */}
                      <i className="mskPlay"></i>
                    </div>
                    <div className="name-box fl">
                      <NavLink
                        to={{
                          pathname: "/program",
                          search: "?id=" + item.id,
                        }}
                      >
                        {item.mainSong.name}
                      </NavLink>
                    </div>
                    <NavLink
                      to={{
                        pathname: "/djradio",
                        search: "?id=" + item.radio.id,
                      }}
                      className="radio-name fl"
                    >
                      {item.radio.name}
                    </NavLink>
                    <span className="play-num fl">
                      播放{item.listenerCount}
                    </span>
                    <span className="like-num fl">赞{item.likedCount}</span>
                    <div className="djCategory fl">
                      <NavLink
                        to={{
                          pathname: "/discover/djradio/category",
                          search: "?id=" + item.radio.categoryId,
                        }}
                      >
                        {item.radio.category}
                      </NavLink>
                    </div>
                  </li>
                );
              })
            : ""}
        </ul>
      </div>
    </DjRadioRecommendWrap>
  );
});
